<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
<head>
<!-- GenHTML revision 25226-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Developing a Simple Facelets Application - The Java EE 6 Tutorial</title>
<meta name="robots" content="index,follow">
<meta name="robots" content="index,follow">
<meta name="date" content="2011-03-01">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/ipg.css">
<link rel="stylesheet" type="text/css" href="css/javaeetutorial.css">
</head>

<body>

<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody>
   <tr valign="top">
      <td width="400px"><p class="toc level1"><a href="docinfo.html">Document Information</a></p>
<p class="toc level1 tocsp"><a href="gexaf.html">Preface</a></p>
<p class="toc level1 tocsp"><a href="gfirp.html">Part&nbsp;I&nbsp;Introduction</a></p>
<p class="toc level2"><a href="bnaaw.html">1.&nbsp;&nbsp;Overview</a></p>
<p class="toc level2"><a href="gfiud.html">2.&nbsp;&nbsp;Using the Tutorial Examples</a></p>
<p class="toc level1 tocsp"><a href="bnadp.html">Part&nbsp;II&nbsp;The Web Tier</a></p>
<p class="toc level2"><a href="bnadr.html">3.&nbsp;&nbsp;Getting Started with Web Applications</a></p>
<p class="toc level2"><a href="bnaph.html">4.&nbsp;&nbsp;JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="giepx.html">5.&nbsp;&nbsp;Introduction to Facelets</a></p>
<p class="toc level3"><a href="gijtu.html">What Is Facelets?</a></p>
<div id="scrolltoc" class="onpage">
<p class="toc level3"><a href="">Developing a Simple Facelets Application</a></p>
<p class="toc level4"><a href="#giqte">Creating a Facelets Application</a></p>
<p class="toc level5"><a href="#giqqz">Developing a Managed Bean</a></p>
<p class="toc level5"><a href="#gjzpv">Creating Facelets Views</a></p>
<p class="toc level4 tocsp"><a href="#gjjkc">Configuring the Application</a></p>
<p class="toc level4"><a href="#girgf">Building, Packaging, Deploying, and Running the <tt>guessnumber</tt> Facelets Example</a></p>
<p class="toc level5"><a href="#gjqzl">To Build, Package, and Deploy the <tt>guessnumber</tt> Example Using NetBeans IDE</a></p>
<p class="toc level5"><a href="#gjqyu">To Build, Package, and Deploy the <tt>guessnumber</tt> Example Using Ant</a></p>
<p class="toc level5"><a href="#gjqyx">To Run the <tt>guessnumber</tt> Example</a></p>
</div>
<p class="toc level3 tocsp"><a href="giqxp.html">Templating</a></p>
<p class="toc level3"><a href="giqzr.html">Composite Components</a></p>
<p class="toc level3"><a href="girgm.html">Resources</a></p>
<p class="toc level2 tocsp"><a href="gjddd.html">6.&nbsp;&nbsp;Expression Language</a></p>
<p class="toc level2"><a href="bnaqz.html">7.&nbsp;&nbsp;Using JavaServer Faces Technology in Web Pages</a></p>
<p class="toc level2"><a href="gjcut.html">8.&nbsp;&nbsp;Using Converters, Listeners, and Validators</a></p>
<p class="toc level2"><a href="bnatx.html">9.&nbsp;&nbsp;Developing with JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="gkmaa.html">10.&nbsp;&nbsp;JavaServer Faces Technology Advanced Concepts</a></p>
<p class="toc level2"><a href="bnawo.html">11.&nbsp;&nbsp;Configuring JavaServer Faces Applications</a></p>
<p class="toc level2"><a href="gkiow.html">12.&nbsp;&nbsp;Using Ajax with JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="gkhxa.html">13.&nbsp;&nbsp;Advanced Composite Components</a></p>
<p class="toc level2"><a href="bnavg.html">14.&nbsp;&nbsp;Creating Custom UI Components</a></p>
<p class="toc level2"><a href="bnafd.html">15.&nbsp;&nbsp;Java Servlet Technology</a></p>
<p class="toc level2"><a href="bnaxu.html">16.&nbsp;&nbsp;Internationalizing and Localizing Web Applications</a></p>
<p class="toc level1 tocsp"><a href="bnayk.html">Part&nbsp;III&nbsp;Web Services</a></p>
<p class="toc level2"><a href="gijti.html">17.&nbsp;&nbsp;Introduction to Web Services</a></p>
<p class="toc level2"><a href="bnayl.html">18.&nbsp;&nbsp;Building Web Services with JAX-WS</a></p>
<p class="toc level2"><a href="giepu.html">19.&nbsp;&nbsp;Building RESTful Web Services with JAX-RS</a></p>
<p class="toc level2"><a href="gjjxe.html">20.&nbsp;&nbsp;Advanced JAX-RS Features</a></p>
<p class="toc level2"><a href="gkojl.html">21.&nbsp;&nbsp;Running the Advanced JAX-RS Example Application</a></p>
<p class="toc level1 tocsp"><a href="bnblr.html">Part&nbsp;IV&nbsp;Enterprise Beans</a></p>
<p class="toc level2"><a href="gijsz.html">22.&nbsp;&nbsp;Enterprise Beans</a></p>
<p class="toc level2"><a href="gijre.html">23.&nbsp;&nbsp;Getting Started with Enterprise Beans</a></p>
<p class="toc level2"><a href="gijrb.html">24.&nbsp;&nbsp;Running the Enterprise Bean Examples</a></p>
<p class="toc level2"><a href="bnbpk.html">25.&nbsp;&nbsp;A Message-Driven Bean Example</a></p>
<p class="toc level2"><a href="gkcqz.html">26.&nbsp;&nbsp;Using the Embedded Enterprise Bean Container</a></p>
<p class="toc level2"><a href="gkidz.html">27.&nbsp;&nbsp;Using Asynchronous Method Invocation in Session Beans</a></p>
<p class="toc level1 tocsp"><a href="gjbnr.html">Part&nbsp;V&nbsp;Contexts and Dependency Injection for the Java EE Platform</a></p>
<p class="toc level2"><a href="giwhb.html">28.&nbsp;&nbsp;Introduction to Contexts and Dependency Injection for the Java EE Platform</a></p>
<p class="toc level2"><a href="gjbls.html">29.&nbsp;&nbsp;Running the Basic Contexts and Dependency Injection Examples</a></p>
<p class="toc level2"><a href="gjehi.html">30.&nbsp;&nbsp;Contexts and Dependency Injection for the Java EE Platform: Advanced Topics</a></p>
<p class="toc level2"><a href="gkhre.html">31.&nbsp;&nbsp;Running the Advanced Contexts and Dependency Injection Examples</a></p>
<p class="toc level1 tocsp"><a href="bnbpy.html">Part&nbsp;VI&nbsp;Persistence</a></p>
<p class="toc level2"><a href="bnbpz.html">32.&nbsp;&nbsp;Introduction to the Java Persistence API</a></p>
<p class="toc level2"><a href="gijst.html">33.&nbsp;&nbsp;Running the Persistence Examples</a></p>
<p class="toc level2"><a href="bnbtg.html">34.&nbsp;&nbsp;The Java Persistence Query Language</a></p>
<p class="toc level2"><a href="gjitv.html">35.&nbsp;&nbsp;Using the Criteria API to Create Queries</a></p>
<p class="toc level2"><a href="gkjiq.html">36.&nbsp;&nbsp;Creating and Using String-Based Criteria Queries</a></p>
<p class="toc level2"><a href="gkjjf.html">37.&nbsp;&nbsp;Controlling Concurrent Access to Entity Data with Locking</a></p>
<p class="toc level2"><a href="gkjia.html">38.&nbsp;&nbsp;Improving the Performance of Java Persistence API Applications By Setting a Second-Level Cache</a></p>
<p class="toc level1 tocsp"><a href="gijrp.html">Part&nbsp;VII&nbsp;Security</a></p>
<p class="toc level2"><a href="bnbwj.html">39.&nbsp;&nbsp;Introduction to Security in the Java EE Platform</a></p>
<p class="toc level2"><a href="bncas.html">40.&nbsp;&nbsp;Getting Started Securing Web Applications</a></p>
<p class="toc level2"><a href="bnbyk.html">41.&nbsp;&nbsp;Getting Started Securing Enterprise Applications</a></p>
<p class="toc level1 tocsp"><a href="gijue.html">Part&nbsp;VIII&nbsp;Java EE Supporting Technologies</a></p>
<p class="toc level2"><a href="gijto.html">42.&nbsp;&nbsp;Introduction to Java EE Supporting Technologies</a></p>
<p class="toc level2"><a href="bncih.html">43.&nbsp;&nbsp;Transactions</a></p>
<p class="toc level2"><a href="bncjh.html">44.&nbsp;&nbsp;Resource Connections</a></p>
<p class="toc level2"><a href="bncdq.html">45.&nbsp;&nbsp;Java Message Service Concepts</a></p>
<p class="toc level2"><a href="bncgv.html">46.&nbsp;&nbsp;Java Message Service Examples</a></p>
<p class="toc level2"><a href="gkahp.html">47.&nbsp;&nbsp;Advanced Bean Validation Concepts and Examples</a></p>
<p class="toc level2"><a href="gkeed.html">48.&nbsp;&nbsp;Using Java EE Interceptors</a></p>
<p class="toc level1 tocsp"><a href="gkgjw.html">Part&nbsp;IX&nbsp;Case Studies</a></p>
<p class="toc level2"><a href="gkaee.html">49.&nbsp;&nbsp;Duke's Tutoring Case Study Example</a></p>
<p class="toc level1 tocsp"><a href="idx-1.html">Index</a></p>
</td>
      <td width="10px">&nbsp;</td>
      <td>
         <div class="header">
             <div class="banner">
                <table width="100%" border="0" cellpadding="5" cellspacing="0">
                   <tbody>
                      <tr>
                         <td valign="bottom"><p class="Banner">The Java EE 6 Tutorial
</p></td>
                         <td align="right"  valign="bottom"><img src="graphics/javalogo.png" alt="Java Coffee Cup logo"></td>
                      </tr>
                   </tbody>
                </table>
             </div>

             <div class="header-links">
	         <a href="./index.html">Home</a> | 
<a href="../information/download.html">Download</a> | 
<a href="./javaeetutorial6.pdf">PDF</a> | 
<a href="../information/faq.html">FAQ</a> | 
<a href="http://download.oracle.com/javaee/feedback.htm">Feedback</a>

             </div>
             <div class="navigation">
                 <a href="gijtu.html"><img src="graphics/leftButton.gif" border="0" alt="Previous" title="Previous"></a>
                 <a href="p1.html"><img src="graphics/upButton.gif" border="0" alt="Contents" title="Contents"></a>
                 <a href="giqxp.html"><img src="graphics/rightButton.gif" border="0" alt="Next" title="Next"></a>
             </div>
         </div>

	 <div class="maincontent">      	 
             

<a name="gipob"></a><h2>Developing a Simple Facelets Application</h2>
<a name="indexterm-230"></a><p>This section describes the general steps involved in developing a JavaServer Faces application.
The following tasks are usually required:</p>


<ul><li><p>Developing the managed beans</p>

</li>
<li><p>Creating the pages using the component tags</p>

</li>
<li><p>Defining page navigation</p>

</li>
<li><p>Mapping the <tt>FacesServlet</tt> instance</p>

</li>
<li><p>Adding managed bean declarations</p>

</li></ul>


<a name="giqte"></a><h3>Creating a Facelets Application</h3>
<p>The example used in this tutorial is the <tt>guessnumber</tt> application. The application presents
you with a page that asks you to guess a number between 0
and 10, validates your input against a random number, and responds with another
page that informs you whether you guessed the number correctly or incorrectly.</p>



<a name="giqqz"></a><h4>Developing a Managed Bean</h4>
<a name="indexterm-231"></a><a name="indexterm-232"></a><p>In a typical JavaServer Faces application, each page of the application connects to
a managed bean. The managed bean defines the methods and properties that are
associated with the components.</p>

<p>The following managed bean class, <tt>UserNumberBean.java</tt>, generates a random number from 0 to
10:</p>

<pre>package guessNumber;

import java.util.Random;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped; 

@ManagedBean
@SessionScoped
public class UserNumberBean {

    Integer randomInt = null;
    Integer userNumber = null;
    String response = null;
    private long maximum=10;
    private long minimum=0;

    public UserNumberBean() {
        Random randomGR = new Random();
        randomInt = new Integer(randomGR.nextInt(10));
        System.out.println("Duke's number: " + randomInt);
    }

    public void setUserNumber(Integer user_number) {
        userNumber = user_number;
    }

    public Integer getUserNumber() {
        return userNumber;
    }

    public String getResponse() {
        if ((userNumber != null) &amp;&amp; (userNumber.compareTo(randomInt) == 0)) {
            return "Yay! You got it!";
        } else {
            return "Sorry, " + userNumber + " is incorrect.";
        }
    }

    public long getMaximum() {
        return (this.maximum);
    }

    public void setMaximum(long maximum) {
        this.maximum = maximum;
    }

    public long getMinimum() {
        return (this.minimum);
    }

    public void setMinimum(long minimum) {
        this.minimum = minimum;
    }
}</pre><p>Note the use of the <tt>@ManagedBean</tt> annotation, which registers the managed bean as
a resource with JavaServer Faces implementation. The <tt>@SessionScoped</tt> annotation registers the bean scope as
<tt>session</tt>.</p>



<a name="gjzpv"></a><h4>Creating Facelets Views</h4>
<a name="indexterm-233"></a><p>Creating a page or view is the responsibility of a page author.
This task involves adding components on the pages, wiring the components to managed bean
values and properties, and registering converters, validators, or listeners onto the components.</p>

<p>For the example application, XHTML web pages serve as the front end. The
first page of the example application is a page called <tt>greeting.xhtml</tt>. A
closer look at various sections of this web page provides more information.</p>

<p>The first section of the web page declares the content type for
the page, which is XHTML:</p>

<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre><p>The next section specifies the language of the XHTML page, then declares the
XML namespace for the tag libraries that are used in the web
page:</p>

<pre>&lt;html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"></pre><p>The next section uses various tags to insert components into the web page:</p>

<pre>&lt;h:head>
        &lt;title>Guess Number Facelets Application&lt;/title>
    &lt;/h:head>
    &lt;h:body>
        &lt;h:form>
            &lt;h:graphicImage value="#{resource['images:wave.med.gif']}"
                            alt="Duke waving his hand"/>
            &lt;h2>
                Hi, my name is Duke. I am thinking of a number from
                #{userNumberBean.minimum} to #{userNumberBean.maximum}.
                Can you guess it?
            &lt;/h2>
            &lt;p>&lt;h:inputText
                    id="userNo"
                    title="Type a number from 0 to 10:"
                    value="#{userNumberBean.userNumber}">
                    &lt;f:validateLongRange
                        minimum="#{userNumberBean.minimum}"
                        maximum="#{userNumberBean.maximum}"/>
                &lt;/h:inputText>
            
                &lt;h:commandButton id="submit" value="Submit"
                                action="response.xhtml"/>
            &lt;/p>
            &lt;h:message showSummary="true" showDetail="false"
                       style="color: #d20005;
                       font-family: 'New Century Schoolbook', serif;
                       font-style: oblique;
                       text-decoration: overline"
                       id="errors1"
                       for="userNo"/>

        &lt;/h:form>
    &lt;/h:body></pre><p>Note the use of the following tags:</p>


<ul><li><p>Facelets HTML tags (those beginning with <tt>h:</tt>) to add components</p>

</li>
<li><p>The Facelets core tag <tt>f:validateLongRange</tt> to validate the user input</p>

</li></ul>
<p>An <tt>inputText</tt> component accepts user input and sets the value of the managed
bean property <tt>userNumber</tt> through the EL expression <tt>#{userNumberBean.userNumber}</tt>. The input value is validated for
value range by the JavaServer Faces standard validator <tt>f:validateLongRange</tt>.</p>

<p>The image file, <tt>wave.med.gif</tt>, is added to the page as a resource. For
more details about the resources facility, see <a href="girgm.html">Resources</a>.</p>

<p>A <tt>commandButton</tt> component with the ID <tt>submit</tt> starts validation of the input data
when a user clicks the button. Using implicit navigation, the component redirects the
client to another page, <tt>response.xhtml</tt>, which shows the response to your input.</p>

<p>You can now create the second page, <tt>response.xhtml</tt>, with the following content:</p>

<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

    &lt;h:head>
        &lt;title>Guess Number Facelets Application&lt;/title>
    &lt;/h:head>
    &lt;h:body>
        &lt;h:form>
            &lt;h:graphicImage value="#{resource['images:wave.med.gif']}"
                            alt="Duke waving his hand"/>
            &lt;h2>
                &lt;h:outputText id="result" value="#{userNumberBean.response}"/>
            &lt;/h2>
            &lt;h:commandButton id="back" value="Back" action="greeting.xhtml"/>
        &lt;/h:form>
    &lt;/h:body>
&lt;/html></pre>

<a name="gjjkc"></a><h3>Configuring the Application</h3>
<a name="indexterm-234"></a><p>Configuring a JavaServer Faces application involves mapping the Faces Servlet in the web
deployment descriptor file, such as a <tt>web.xml</tt> file, and possibly adding managed bean
declarations, navigation rules, and resource bundle declarations to the application configuration resource file,
<tt>faces-config.xml</tt>.</p>

<p>If you are using NetBeans IDE, a web deployment descriptor file is automatically
created for you. In such an IDE-created <tt>web.xml</tt> file, change the default greeting
page, which is <tt>index.xhtml</tt>, to <tt>greeting.xhtml</tt>. Here is an example <tt>web.xml</tt> file, showing this
change in bold.</p>

<pre>&lt;?xml version="1.0" encoding="UTF-8"?>
&lt;web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
  http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    &lt;context-param>
        &lt;param-name>javax.faces.PROJECT_STAGE&lt;/param-name>
        &lt;param-value>Development&lt;/param-value>
    &lt;/context-param>
    &lt;servlet>
        &lt;servlet-name>Faces Servlet&lt;/servlet-name>
        &lt;servlet-class>javax.faces.webapp.FacesServlet&lt;/servlet-class>
        &lt;load-on-startup>1&lt;/load-on-startup>
    &lt;/servlet>
    &lt;servlet-mapping>
        &lt;servlet-name>Faces Servlet&lt;/servlet-name>
        &lt;url-pattern>/faces/*&lt;/url-pattern>
    &lt;/servlet-mapping>
    &lt;session-config>
        &lt;session-timeout>
            30
        &lt;/session-timeout>
    &lt;/session-config>
    &lt;welcome-file-list>
        <b>&lt;welcome-file>faces/greeting.xhtml&lt;/welcome-file></b>
    &lt;/welcome-file-list>
&lt;/web-app></pre><p>Note the use of the context parameter <tt>PROJECT_STAGE</tt>. This parameter identifies the status
of a JavaServer Faces application in the software lifecycle.</p>

<p>The stage of an application can affect the behavior of the application. For
example, if the project stage is defined as <tt>Development</tt>, debugging information is automatically
generated for the user. If not defined by the user, the default project
stage is <tt>Production</tt>.</p>



<a name="girgf"></a><h3>Building, Packaging, Deploying, and Running the <tt>guessnumber</tt> Facelets Example</h3>
<p>You can use either NetBeans IDE or Ant to build, package, deploy, and
run the <tt>guessnumber</tt> example. The source code for this example is available in
the <tt></tt><i>tut-install</i><tt>/examples/web/guessnumber</tt> directory.</p>



<a name="gjqzl"></a><h4>To Build, Package, and Deploy the <tt>guessnumber</tt> Example Using NetBeans IDE</h4>
<ol>
<li><b>From the File menu, choose Open Project.</b></li>
<li><b>In the Open Project dialog, navigate to:</b><pre><tt></tt><i>tut-install</i><tt>/examples/web/</tt></pre></li>
<li><b>Select the <tt>guessnumber</tt> folder.</b></li>
<li><b>Select the Open as Main Project check box.</b></li>
<li><b>Click Open Project.</b></li>
<li><b>In the Projects tab, right-click the <tt>guessnumber</tt> project and select Deploy.</b><p>This option builds and deploys the example application to your GlassFish Server instance.</p></li></ol>

<a name="gjqyu"></a><h4>To Build, Package, and Deploy the <tt>guessnumber</tt> Example Using Ant</h4>
<ol>
<li><b>In a terminal window, go to:</b><pre><tt></tt><i>tut-install</i><tt>/examples/web/guessnumber/</tt></pre></li>
<li><b>Type the following command:</b><pre><tt><b>ant</b></tt></pre><p>This command calls the <tt>default</tt> target, which builds and packages the application into
a WAR file, <tt>guessnumber.war</tt>, that is located in the <tt>dist</tt> directory.</p></li>
<li><b>Make sure that the GlassFish Server is started.</b></li>
<li><b>To deploy the application, type the following command:</b><pre><tt><b>ant deploy</b></tt></pre></li></ol>

<a name="gjqyx"></a><h4>To Run the <tt>guessnumber</tt> Example</h4>
<ol>
<li><b>Open a web browser.</b></li>
<li><b>Type the following URL in your web browser:</b><pre><tt><b>http://localhost:8080/guessnumber</b></tt></pre><p>A web page opens.</p></li>
<li><b>In the text field, type a number from 0 to 10 and
click Submit.</b><p>Another page appears, reporting whether your guess is correct or incorrect.</p></li>
<li><b>If you guessed incorrectly, click the Back button to return to the main
page. </b><p>You can continue to guess until you get the correct answer.</p></li></ol>
         </div>
         <div class="navigation">
             <a href="gijtu.html"><img src="graphics/leftButton.gif" border="0" alt="Previous" title="Previous"></a>
             <a href="p1.html"><img src="graphics/upButton.gif" border="0" alt="Contents" title="Contents"></a>
             <a href="giqxp.html"><img src="graphics/rightButton.gif" border="0" alt="Next" title="Next"></a>
         </div>

         <div class="copyright">
      	    <p>Copyright &copy; 2011, Oracle and/or its affiliates. All rights reserved. <a href="docinfo.html">Legal Notices</a></p>
      	 </div>

      </td>
   </tr>
</tbody>
</table>
</body>
</html>

